<script>
export default {
  name: "XunjianXQView",
  data() {
    return {
      list:{},
      tableData: [
        { id:1 , type: '设备', deviceOrSpace: '门禁闸机', inspectionTemplate: '门禁模板', location: '1F2号' },
        { id:2 , type: '空间', deviceOrSpace: 'A区', inspectionTemplate: '消防通道模板', location: '2F' },
        { id:3 , type: '空间', deviceOrSpace: 'B区', inspectionTemplate: '消防门模板', location: '2F' },
      ],
    };
  },
  created() {
    // 获取参数
    // const id = this.$route.query.id
    // 查询
    this.axios.get(`http://localhost:9999/api-work-order-service/work-order/qcById?id=` + this.$route.query.id).then(res => {
      this.list = res.data.data;
      console.log(res)
      console.log(this.list)
    })
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },

  },

}
</script>

<template>
  <div>
    <van-nav-bar
        title="详情"
        left-arrow
        @click-left="onBack"
        fixed
    />

    <div>
      <h4>占位</h4>
      <h4 class="title">基本信息</h4>
      <div class="info">
        <p>计划名称：{{list.planName}} </p>
        <p>计划类型：{{list.planType==1?"人工巡检":"智能巡检"}}</p>
        <p>工作班组：{{list.workGroup}}</p>
        <p>开始时间：{{list.startTime}}</p>
        <p>处理时限：{{list.processingDeadline}}</p>
        <p>派单时间(提前)：{{list.dispatchTime}}小时</p>
        <p>执行频率：{{list.executionFrequency}}</p>
      </div>

      <div>
        <div style="margin-top: 10px">
          <p>巡检信息</p>
          <table border="1px" cellspacing="0px" style="margin-left: 15px;margin-right: 15px">
            <tr>
              <th style="width: 150px">巡检类型</th>
              <th style="width: 150px">设备/空间</th>
              <th style="width: 150px">巡检模板</th>
              <th style="width: 150px">位置</th>
            </tr>
            <tr v-for="item in tableData" :key="item.id">
              <td>{{ item.type }}</td>
              <td>{{ item.deviceOrSpace }}</td>
              <td>{{ item.inspectionTemplate }}</td>
              <td>{{ item.location }}</td>
            </tr>
          </table>
        </div>
      </div>
      <van-button type="info" size="large" style="margin-top: 10px" @click="onBack">返回</van-button>
  </div>

  </div>
</template>

<style scoped>
.info {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f8f8;
  font-size: 10px;
  text-align: left;
}

.title {
  text-align: left;
}
.operation-log {
  width: 70%;
  height: 50%;
}
.ticket-list {
  padding: 12px;
  margin-top: 50px;
}

.ticket-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebedf0;
}

.ticket-id {
  font-size: 14px;
  color: #323233;
}

.ticket-priority {
  font-size: 14px;
  font-weight: 500;
}

.ticket-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ticket-info {
  font-size: 13px;
  color: #646566;
  line-height: 1.5;
}

.ticket-info, .content-section {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  line-height: 20px;
}

.label {
  color: #646566;
  min-width: 90px;
  flex-shrink: 0;
}

.value {
  color: #323233;
  flex: 1;
}

#app {
  margin-top: -20px;
}

.title {
  height: 30px;
}

#zt {
  float: right;
  margin-right: 25px;
}
</style>